<template>
  <el-dialog v-model="visible" :title="dialogTitle" width="80%">
    <el-divider content-position="left">采集数据列表</el-divider>

    <div class="collect-table">
      <div class="table-header">
        <div class="col noise">噪音(dB)</div>
        <div class="col vibration">震动(mm/s)</div>
        <div class="col temp">温度(°C)</div>
        <div class="col current">电流(A)</div>
        <div class="col base">基础字段</div>
        <div class="col time">采集时间</div>
        <div class="col ops">操作</div>
      </div>

      <div v-for="(r, i) in rows" :key="r.uid" class="table-row">
        <div class="col noise">
          <el-input-number v-model="r.noise" :min="0" :max="200" controls-position="right" />
        </div>
        <div class="col vibration">
          <el-input-number v-model="r.vibration" :min="0" :max="50" controls-position="right" />
        </div>
        <div class="col temp">
          <el-input-number v-model="r.temperature" :min="-50" :max="200" controls-position="right" />
        </div>
        <div class="col current">
          <el-input-number v-model="r.current" :min="0" :max="500" controls-position="right" />
        </div>
        <div class="col base">
          <el-input v-model="r.baseField" placeholder="请输入基础字段" />
        </div>
        <div class="col time">
          <el-date-picker
            v-model="r.collectTime"
            type="datetime"
            placeholder="请选择时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </div>
        <div class="col ops">
          <el-button link size="small" type="primary" @click="copyRow(i)">复制</el-button>
          <el-button link size="small" type="danger" @click="removeRow(i)">删除</el-button>
        </div>
      </div>

      <div class="add-btn">
        <el-button size="small" type="success" plain @click="addRow">＋ 新增一行</el-button>
      </div>
    </div>

    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch, computed } from "vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  mode: { type: String, default: "create" }, // create 或 edit
  plan: { type: Object, default: null },     // 编辑时的数据 
});

const emit = defineEmits(["confirm"]);

const visible = ref(false);
const rows = reactive([]);
const dialogTitle = computed(() =>
  props.mode === "edit" ? "编辑采集数据" : "新增采集数据"
);

function addRow() {
  rows.push({
    uid: Math.random().toString(36).slice(2),
    noise: null,
    vibration: null,
    temperature: null,
    current: null,
    baseField: "",
    collectTime: "",
  });
}

function copyRow(i) {
  const newRow = JSON.parse(JSON.stringify(rows[i]));
  newRow.uid = Math.random().toString(36).slice(2);
  rows.splice(i + 1, 0, newRow);
}

function removeRow(i) {
  rows.splice(i, 1);
}

function confirm() {
  if (!rows.length) return ElMessage.error("请至少添加一条采集数据");
  emit("confirm", { mode: props.mode, data: JSON.parse(JSON.stringify(rows)) });
  // visible.value = false;
}

const open = () => {
  visible.value = true;
  rows.splice(0);

  if (props.mode === "edit" && props.plan) {
    // ✅ 说明是编辑模式，填充已有数据
    const existing = props.plan.rows || [props.plan];
    existing.forEach(r => {
      rows.push({
        uid: Math.random().toString(36).slice(2),
        noise: r.noise ?? 0,
        vibration: r.vibration ?? 0,
        temperature: r.temperature ?? 0,
        current: r.electricCurrent ?? 0,
        collectTime: r.collectTime || "",
        baseField: r.baseField || ""
      });
    });
  } else {
    // 新增模式
    addRow();
  }
};

const close = () => { visible.value = false; };
defineExpose({ open,close });
</script>

<style scoped>
.collect-table {
  border: 1px solid #ebeef5;
  border-radius: 8px;
}
.table-header,
.table-row {
  display: grid;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
  padding: 6px 8px;
  grid-template-columns: 10% 10% 10% 10% 20% 20% 10%;
}
.table-header {
  background: #f5f7fa;
  font-weight: 500;
}
.col {
  padding: 4px;
}
.col.ops {
  text-align: center;
}
.add-btn {
  text-align: right;
  padding: 8px;
}
</style>
